import React from "react";
import {
  Card,
  message,
  List,
  Modal,
  Button,
  Form,
  DatePicker,
  Popconfirm,
} from "antd";
import { SearchOutlined } from "@ant-design/icons";
import axios from "axios";
import qs from "qs";
import "../mock/wmeetingdata";
import WEditTable from "./WEditTable";
export default class WWeekMeeting extends React.Component {
  constructor(props) {
    super(props);
    this.getWeek = this.getWeek.bind(this);
    this.MonDate = "";
    this.SunDate = "";
    this.state = {
      WeekData: [],
      modalVisible: false,
      editData: [],
    };
  }
  getDate() {
    const toString = (data) => {
      return (
        data.getFullYear() +
        "-" +
        (data.getMonth() < 9
          ? "0" + Number(data.getMonth() + 1)
          : data.getMonth() + 1) +
        "-" +
        data.getDate()
      );
    };
    var now = new Date();
    var nowTime = now.getTime();
    var day = now.getDay() || 7;
    var oneDayTime = 24 * 60 * 60 * 1000;
    var MondayTime = nowTime - (day - 1) * oneDayTime;
    var SundayTime = nowTime + (7 - day) * oneDayTime;
    this.MonDate = toString(new Date(MondayTime));
    this.SunDate = toString(new Date(SundayTime));
  }
  getWeek() {
    this.getMeeting(this.MonDate, this.SunDate);
  }
  getMeeting(start, end) {
    axios
      .post(
        "fetchweekmeetingbyparticipatorid.rst",
        qs.stringify({
          startDate: start,
          endDate: end,
        })
      )
      .then((res) => {
        let response = res.data;
        if (response.resultCode === 0) {
          let data = response.result.data;
          console.log(data);
          this.setState({
            WeekData: data.map((data, index) => {
              let type;
              if (!data.meetingDate || !data.meetingTime) {
                type = "另行通知";
              } else {
                var d = new Date(
                  data.meetingDate + " " + data.meetingTime.replace(/-/g, "/")
                );
                // var curDate = new Date("2000/1/1".replace(/-/g, "/"));
                var curDate = new Date();
                if (d <= curDate) {
                  type = "已结束";
                } else {
                  type = "待开始";
                }
              }

              return {
                key: data.id,
                meetingDate: data.meetingDate,
                meetingTime: data.meetingTime,
                meetingAddress: data.locale,
                title: data.theme,
                host: data.host + " ",
                participator: data.participator.split(","),
                remindTime: data.remindTime,
                meetingRoom: data.meetingRoom,
                type: type,
              };
            }),
          });
        } else {
          // alert('数据请求失败')
          message.error("数据请求失败");
        }
      })
      .catch((error) => {
        console.log(error);
        // alert('数据请求失败')
        message.error("数据请求失败");
      });
  }
  componentDidMount() {
    this.getDate();
    this.getWeek();
  }
  showAddModal = () => {
    this.setState({
      modalVisible: true,
    });
  };
  onSearch = (value) => {
    console.log(value);
    let startDate = value.startDate.format("YYYY-MM-DD");
    let endDate = value.endDate.format("YYYY-MM-DD");
    this.getMeeting(startDate, endDate);
  };
  /**点击编辑按钮 */
  editMeeting = (meetingData) => {
    // console.log(meetingData);
    this.setState({
      editData: meetingData,
    });
    this.showAddModal();
  };
  delMeeting = (key) => {
    console.log(key);

    axios
      .post(
        "deletemeetingbyid.rst",
        qs.stringify({
          delArr: key,
        })
      )
      .then((res) => {
        let response = res.data;
        if (response.resultCode === 0) {
          /**重载表格数据 */
          // getDataSource();
          message.success("删除成功");
        } else {
          message.error("删除失败");
        }
      })
      .catch((error) => {
        message.error("删除失败");
      });
  };
  render() {
    const { modalVisible, WeekData, editData } = this.state;
    const handleCancel = () => {
      this.setState({
        modalVisible: false,
      });
    };
    return (
      <div className="Wweekmeeting">
        <div className="Wsearch-meeting">
          <Form name="control-hooks" onFinish={this.onSearch}>
            <Form.Item name="startDate">
              <DatePicker format="YYYY-MM-DD" className="WDatePicker" />
            </Form.Item>
            <Form.Item name="endDate">
              <DatePicker format="YYYY-MM-DD" className="WDatePicker" />
            </Form.Item>

            <Button
              shape="circle"
              icon={<SearchOutlined />}
              htmlType="submit"
              type="primary"
            />
          </Form>
        </div>
        <div className="site-card-border-less-wrapper">
          <List
            className="weeklist"
            itemLayout="horizontal"
            dataSource={WeekData}
            renderItem={(item) => (
              <List.Item className="week-list-item">
                <Card title={item.title} bordered={false} className="weekcard">
                  <div className="week-info">日期：{item.meetingDate}</div>
                  <div className="week-info">时间：{item.meetingTime}</div>
                  <div className="week-info">地点：{item.meetingAddress}</div>
                  <div className="week-info">主持人：{item.host}</div>
                </Card>
                <div className="week-action">
                  {item.type === "另行通知" && (
                    <div
                      className="week-change"
                      onClick={() => this.editMeeting(item)}
                    >
                      编辑
                    </div>
                  )}
                  <Popconfirm
                    className="week-type"
                    placement="topRight"
                    title={"确定删除此活动/会议吗？"}
                    onConfirm={() => this.delMeeting(item.key)}
                    okText="Yes"
                    cancelText="No"
                  >
                    删除
                  </Popconfirm>
                </div>
              </List.Item>
            )}
          />
          <div className="W-add-meeting">
            {/* <Button type="dashed" size="large">
              <span onClick={this.showAddModal}>+添加个人安排</span>
            </Button> */}
            <Modal
              //对话框属性
              className="Wedit-modal"
              visible={modalVisible}
              title="会议详情"
              centered
              onCancel={handleCancel}
              // width={1000}
              footer={null}
            >
              <WEditTable
                meetingData={editData}
                getWeek={this.getWeek}
                onlyMeeting={false}
              />
            </Modal>
          </div>
        </div>
      </div>
    );
  }
}
